<template>
  <div class="home">
    <div class="show-module">
      <router-link class="com-img-big" :to="currentImgBook.to" :target="global.goBookDetailType">
        <img :src="imgBigUrl" alt="">
      </router-link>
      <div class="com-img-group">
        <!-- <div v-for="(item, i) in comImgBooks" :key="item.bookId" @click="$router.push('/index/bookDetail?id='+item.bookId)" v-on:mouseover="changeImgNow($event, i)" :class="['com-img-small', item.bookId==currentImgBook.bookId?'com-img-small-on':'']">
          <img :src="item.picUrl" alt="" >
        </div> -->
        <!-- router-link不支持mouseover -->
        <a v-for="(item, i) in comImgBooks" :key="item.bookId" :href="'#/index/bookDetail?id='+item.bookId" :target="global.goBookDetailType" v-on:mouseover="changeImgNow($event, i)" :class="['com-img-small', item.bookId==currentImgBook.bookId?'com-img-small-on':'']">
          <img :src="item.picUrl" alt="" >
        </a>
      </div>
      <div class="com-list">
        <c-com-list :books='comlistBooks1'></c-com-list>
        <c-com-list :books='comlistBooks2'></c-com-list>
        <div class="com-news">
          <p v-for="item in comNews" :key="item.id" class="com-new">
            <span class="com-new-title">[{{item.catName}}]&nbsp;</span>
            <!-- <router-link :to="'/index/newsDetail?id='+item.id"> -->
              <span class="com-new-content" v-html="item.title"></span>
            <!-- </router-link> -->
          </p>
        </div>
      </div>
      <c-top-rank title="本周强推" :topRank="comGoodPush" keyStr="bookId"/>
    </div>
    <div class="show-module">
      <c-recommend title="热门推荐" :recommend="recommendHot"/>
      <c-top-rank title="点击榜单" :topRank="clickRank" rankType="0"/>
    </div>
    <div class="show-module">
      <c-recommend title="精品推荐" :recommend="recommendGood"/>
      <c-top-rank title="新书榜单" :topRank="newRank" rankType="1"/>
    </div>
    <div class="show-module">
      <c-table-show title="最近更新" :showList="updateRank" newWidth="705px" :columnShow="['类别','书名','最新章节','作者','更新时间']"/>
      <c-top-rank title="更新榜单" :topRank="updateRank" rankType="2"/>
    </div>
    <!-- <p class="friend-link">
      友情链接：
      <span class="link-to" v-for="(item,i) in friendLink" :key="i">
        <a :href="item.linkUrl" target="_blank">{{item.linkName}}</a>
      </span>
    </p> -->
  </div>
</template>

<script>

import cComList from '../components/index/home/ComList.vue'
import cTopRank from '../components/index/home/TopRank.vue'
import cRecommend from '../components/index/home/Recommend.vue'
import cTableShow from '../components/index/home/TableShow.vue'

export default {
  components:{
    cComList, cTopRank, cRecommend, cTableShow
  },
  data(){
    return {
      comImgBooks:[],
      comlistBooks1:[],
      comlistBooks2:[],
      comNews:[],
      comGoodPush:[],
      recommendHot:[],
      clickRank:[],
      recommendGood:[],
      newRank:[],
      updateRank:[],
      friendLink:[],
      currentImgBook:{to:''},
      currentImgIndex:null,
      imgTimer:null,
      imgBigUrl:require('../assets/images/default.gif')
    }
  },
  created: function(){
    this.listBookSetting();
    this.listIndexNews();
    this.listClickRank();
    this.listNewRank();
    this.listUpdateRank();
    // this.listIndexLink();
  },
  destroyed: function(){
    clearInterval(this.imgTimer)
    this.imgTimer = null
  },
  methods: {
    changeCurrentImg(signIndex){
      if(signIndex != null){
        this.currentImgIndex = signIndex;
      }else if(this.currentImgIndex == null || this.currentImgIndex >= this.comImgBooks.length-1){
        this.currentImgIndex = 0;
      }else{
        this.currentImgIndex++;
      }
      this.currentImgBook = this.comImgBooks[this.currentImgIndex];
      this.currentImgBook.to = '/index/bookDetail?id='+this.currentImgBook.bookId;
      this.imgBigUrl = this.currentImgBook.picUrl;
    },
    listBookSetting(){
      this.$http.post('/book/listBookSetting', {}, res => {
        // console.log(res);
        // console.log(res[0]);
        this.comImgBooks = res[0];
        //设置定时器轮播
        if(!this.imgTimer){
          this.changeCurrentImg(0);
          this.imgTimer = setInterval(this.changeCurrentImg, 3000);
        }

        // this.comlistBooks = res[1];
        if(res[1]){
          if(res[1].length >= 5){
            this.comlistBooks1 = res[1].slice(0,5);
            this.comlistBooks2 = res[1].slice(5);
          }else{
            this.comlistBooks1 = res[1]
            this.comlistBooks2 = [];
          }
        }
        this.comGoodPush = res[2];
        this.recommendHot = res[3];
        this.recommendGood = res[4];
      });
    },
    listIndexNews(){
      this.$http.post('/news/listIndexNews', {}, res => {
        this.comNews = res;
      });
    },
    listClickRank(){
      this.$http.post('/book/listClickRank', {}, res => {
        this.clickRank = res;
      });
    },
    listNewRank(){
      this.$http.post('/book/listNewRank', {}, res => {
        this.newRank = res;
      });
    },
    listUpdateRank(){
      this.$http.post('/book/listUpdateRank', {}, res => {
        this.updateRank = res;
      });
    },
    listIndexLink(){
      this.$http.post('/friendLink/listIndexLink', {}, res => {
        this.friendLink = res;
      });
    },
    changeImgNow($event, i){
      // console.log($event);
      // console.log($event.currentTarget);
      this.changeCurrentImg(i);
    }
  }
}
</script>

<style lang='scss' scoped>
.home {
  // padding: 20px 15% 0 15%;
  padding-top: 20px;
  // background-color: #F5F5F5;
  // display: flex;
  // justify-content: center;
  .show-module {
    margin: 0 auto 20px auto;
    background-color: #fff;
    border-radius: 10px;
    width: 75%;
    // display: flex;
    padding: 20px;
    .com-img-big {
      cursor: pointer;
      display: inline-block;
      width: 240px;
      height: 300px;
      img{
        height: 100%;
        width: 100%;
      }
    }

    .com-img-group {
      display: inline-block;
      // flex-direction: column;
      width: 75px;
      // justify-content: center;
      // align-items: center;
      text-align: center;
      vertical-align: top;
      .com-img-small {
        display: inline-block;
        cursor: pointer;
        width: 45px;
        height: 70px;
        margin: 0 auto 5px auto;
        img{
          height: 100%;
          width: 100%;
        }
      }
      .com-img-small-on{
        border: 2px solid red;
      }
    }

    .com-list {
      // flex: 7;
      vertical-align: top;
      display: inline-block;
      width: 390px;
      padding-right: 10px;
      text-align: center;

      .com-news {
        text-align: left;
        .com-new {
          height: 20px;
          line-height: 20px;
          .com-new-title {
            font-size: 14px;
            // color: #888888;
            color: blue;
          }
          .com-new-content {
            overflow: hidden;
            color: blue;
          }
        }

      }
    }
  }

  .friend-link {
    margin: 30px 0 0 0;
    font-size: 12px;
    text-align: center;
    color: #333;
    .link-to {
      margin: 0 10px;
    }
  }
}
</style>

<style lang="scss">
//这个啥，好像没用到
.newsa {
  text-decoration: underline;
  color: blue;
}
.newsa:hover{
  color: $base-color;
}
</style>